<template>
  <div>
    <div class="asideTitle"><p>{{$t('m.home.abnormal')}}</p><span>{{$t('m.home.tips')}}</span></div>
      <div class="asideBox" v-if="tableState">
        <el-button @click="showOvertimeTable('Order')">
          <p>{{$t('m.home.ordererexpired')}}</p>
          <p>{{orderErexpiredData.expiredorderamount}}</p>
          <el-divider></el-divider>
          <div class="asideData">
            <div>
              <p>{{$t('m.home.expiredrate')}}</p>
              <p>{{orderErexpiredData.expiredorderratio}}%</p>
            </div>
            <el-divider direction="vertical"></el-divider>
            <div>
              <p>{{$t('m.home.average')}}</p>
              <p>{{orderErexpiredData.averageorderhandlingtime}}h</p>
            </div>
          </div>
          <el-tooltip placement="bottom">
            <div slot="content">{{$t('m.home.tips18')}}<br/>{{$t('m.home.tips19')}}<br/>{{$t('m.home.tips20')}}<br/>{{$t('m.home.tips21')}}</div>
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </el-button>

        <el-button @click="showOvertimeTable('Wave')">
          <p>{{$t('m.home.waveerexpired')}}</p>
          <p>{{waveErexpiredData}}</p>
          <el-tooltip placement="bottom">
            <div slot="content">{{$t('m.home.tips22')}}</div>
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </el-button>

        <el-button @click="showOvertimeTable('Picking')">
          <p>{{$t('m.home.pickingerexpired')}}</p>
          <p>{{pickingErexpiredData.expiredptdamount}}</p>
          <el-divider></el-divider>
          <div class="asideData">
            <div>
              <p>{{$t('m.home.expiredrate')}}</p>
              <p>{{pickingErexpiredData.expiredptdratio}}%</p>
            </div>
            <el-divider direction="vertical"></el-divider>
            <div>
              <p>{{$t('m.home.average')}}</p>
              <p>{{pickingErexpiredData.averageptdhandlingtime}}h</p>
            </div>
          </div>
          <el-tooltip placement="bottom">
            <div slot="content">{{$t('m.home.tips23')}}<br/>{{$t('m.home.tips24')}}<br/>{{$t('m.home.tips25')}}<br/>{{$t('m.home.tips26')}}</div>
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </el-button>

        <el-button @click="showOvertimeTable('Sorting')">
          <p>{{$t('m.home.sortingerexpired')}}</p>
          <p>{{sortingErexpiredData.expiredsortingamount}}</p>
          <el-divider></el-divider>
          <div class="asideData">
            <div>
              <p>{{$t('m.home.expiredrate')}}</p>
              <p>{{sortingErexpiredData.expiredsortingratio}}%</p>
            </div>
            <el-divider direction="vertical"></el-divider>
            <div>
              <el-progress :width="30" :text-inside="true" :stroke-width="20" :percentage="sortingErexpiredData.expiredsortingratio"></el-progress>
            </div>
          </div>
          <el-tooltip placement="bottom">
            <div slot="content">{{$t('m.home.tips27')}}<br/>{{$t('m.home.tips28')}}</div>
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </el-button>

        <el-button @click="showOvertimeTable('Review')">
          <p>{{$t('m.home.reviewerexpired')}}</p>
          <p>{{reviewErexpiredData.expiredreviewamount}}</p>
          <el-divider></el-divider>
          <div class="asideData">
            <div>
              <p>{{$t('m.home.expiredrate')}}</p>
              <p>{{reviewErexpiredData.expiredreviewratio}}%</p>
            </div>
            <el-divider direction="vertical"></el-divider>
            <div>
              <el-progress :text-inside="true" :stroke-width="20" :percentage="reviewErexpiredData.expiredreviewratio"></el-progress>
            </div>
          </div>
          <el-tooltip placement="bottom">
            <div slot="content">{{$t('m.home.tips29')}}<br/>{{$t('m.home.tips30')}}</div>
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </el-button>

        <el-button @click="showOvertimeTable('Pack')">
          <p>{{$t('m.home.packerexpired')}}</p>
          <p>{{packErexpiredData.expiredpackagingamount}}</p>
          <el-divider></el-divider>
          <div class="asideData">
            <div>
              <p>{{$t('m.home.expiredrate')}}</p>
              <p>{{packErexpiredData.expiredpackagingratio}}%</p>
            </div>
            <el-divider direction="vertical"></el-divider>
            <div>
              <el-progress :text-inside="true" :stroke-width="20" :percentage="packErexpiredData.expiredpackagingratio"></el-progress>
            </div>
          </div>
          <el-tooltip placement="bottom">
            <div slot="content">{{$t('m.home.tips31')}}<br/>{{$t('m.home.tips32')}}</div>
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </el-button>

        <el-button @click="showOvertimeTable('Handin')">
          <p>{{$t('m.home.sendingerexpired')}}</p>
          <p>{{sendingErexpiredData.expiredsendingamount}}</p>
          <el-divider></el-divider>
          <div class="asideData">
            <div>
              <p>{{$t('m.home.expiredrate')}}</p>
              <p>{{sendingErexpiredData.expiredsendingratio}}%</p>
            </div>
            <el-divider direction="vertical"></el-divider>
            <div>
              <p>{{$t('m.home.average')}}</p>
              <p>{{sendingErexpiredData.averagesendinghandlingtime}}h</p>
            </div>
          </div>
          <el-tooltip placement="bottom">
            <div slot="content">{{$t('m.home.tips33')}}<br/>{{$t('m.home.tips34')}}<br/>{{$t('m.home.tips35')}}<br/>{{$t('m.home.tips36')}}</div>
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </el-button>
      </div>
      <!-- 超时明细 start -->
      <template v-if="showOrder">
        <orderTable @back="hideOvertimeTable('Order')"></orderTable>
      </template>
      <template v-if="showWave">
        <waveTable @back="hideOvertimeTable('Wave')"></waveTable>
      </template>
      <template v-if="showPicking">
        <pickingTable @back="hideOvertimeTable('Picking')"></pickingTable>
      </template>
      <template v-if="showSorting">
        <sortingTable @back="hideOvertimeTable('Sorting')"></sortingTable>
      </template>
      <template v-if="showReview">
        <reviewTable @back="hideOvertimeTable('Review')"></reviewTable>
      </template>
      <template v-if="showPack">
        <packTable @back="hideOvertimeTable('Pack')"></packTable>
      </template>
      <template v-if="showHandin">
        <handinTable @back="hideOvertimeTable('Handin')"></handinTable>
      </template>
      <!-- 超时明细 end -->
	</div>
</template>
<script>
export default {
  name:'outbound-abnormal-dashboard',
  data(){
    return {
      orderErexpiredData:[],
      waveErexpiredData:[],
      pickingErexpiredData:[],
      sortingErexpiredData:[],
      reviewErexpiredData:[],
      packErexpiredData:[],
      sendingErexpiredData:[],

      tableState:true,
      showOrder:false,
      showWave:false,
      showPicking:false,
      showSorting:false,
      showReview:false,
      showPack:false,
      showHandin:false
    }
  },
  mounted(){
    this.getOrderErexpired()
    this.getWaveErexpired()
    this.getpickingErexpired()
    this.getSortingErexpired()
    this.getReviewErexpired()
    this.getPackErexpired()
    this.getSendingErexpired()
  },
  components:{
    orderTable:()=>import('@/components/home/outbound/outbound-order-table'), // 订单超时未出库明细组件
    waveTable:()=>import('@/components/home/outbound/outbound-wave-table'), // 波次单超时未处理明细组件
    pickingTable:()=>import('@/components/home/outbound/outbound-picking-table'), // 拣货超时明细组件
    sortingTable:()=>import('@/components/home/outbound/outbound-sorting-table'), // 二次分拣超时明细组件
    reviewTable:()=>import('@/components/home/outbound/outbound-review-table'), // 复核超时明细组件
    packTable:()=>import('@/components/home/outbound/outbound-pack-table'), // 打包超时明细组件
    handinTable:()=>import('@/components/home/outbound/outbound-handin-table') // 交寄超时明细组件
  },
  methods:{
    // 获取订单超时统计
    getOrderErexpired(){
      let options = {
        method:'get',
        url:`/homepage/saleorderexpiredstatistics`
      }
      this.$axios(options).then(({ data }) => {
        this.orderErexpiredData = data
      })
    },
    // 获取波次单超时统计
    getWaveErexpired(){
      let options = {
        method:'get',
        url:`/homepage/waveorderexpiredstatistics`
      }
      this.$axios(options).then(({ data }) => {
        this.waveErexpiredData = data
      })
    },
    // 获取拣货任务明细超时统计
    getpickingErexpired(){
      let options = {
        method:'get',
        url:`/homepage/ptdexpiredstatistics`
      }
      this.$axios(options).then(({ data }) => {
        this.pickingErexpiredData = data
      })
    },
    // 获取二次分拣超时统计
    getSortingErexpired(){
      let options = {
        method:'get',
        url:`/homepage/sortingexpiredstatistics`
      }
      this.$axios(options).then(({ data }) => {
        this.sortingErexpiredData = data
      })
    },
    // 获取复核单超时统计
    getReviewErexpired(){
      let options = {
        method:'get',
        url:`/homepage/reviewexpiredstatistics`
      }
      this.$axios(options).then(({ data }) => {
        this.reviewErexpiredData = data
      })
    },
    // 获取交寄单超时统计
    getSendingErexpired(){
      let options = {
        method:'get',
        url:`/homepage/sendingexpiredstatistics`
      }
      this.$axios(options).then(({ data }) => {
        this.sendingErexpiredData = data
      })
    },
    // 获取打包单超时统计
    getPackErexpired(){
      let options = {
        method:'get',
        url:`/homepage/packagingexpiredstatistics`
      }
      this.$axios(options).then(({ data }) => {
        this.packErexpiredData = data
      })
    },
    // 显示超时明细table
    showOvertimeTable(Name){
      this.tableState = false
      this[`show${Name}`] = true
    },
    // 隐藏超时明细table
    hideOvertimeTable(Name){
      this.tableState = true
      this[`show${Name}`] = false
    }
  }
}
</script>
<style lang="scss" scoped>
.asideTitle {
    display: flex;
    justify-content: space-between;
    p {
      font-size: 20px;
      font-weight: bold;
      margin-top: 18px;
      margin-left: 30px;
    }
    span {
      color: #d9001b;
      font-size: 16px;
      margin-top: 22px;
      margin-right: 26px;
    }
  }
  .asideBox {
    display: flex;
    flex-wrap:wrap;
    .el-button {
      height: 155px;
      width: 45%;
      margin-left: 22px;
      margin-top: 10px;
      color: #ffffff;
      position: relative;
        .el-progress {
          width: 120px;
          margin-left: 10px;
        }
        p {
          &:nth-child(1) {
            font-size: 15px;
          }
          &:nth-child(2) {
            margin-top: 15px;
            margin-bottom: 5px;
            font-size: 28px;
          }
        }
        .el-icon-warning-outline {
          position: absolute;
          top: 8px;
          right: 8px;
        }
      .asideData {
        display: flex;
        p {
          margin-top: -8px;
          margin-left: 2px;
          &:nth-child(1) {
            font-size: 14px;
          }
          &:nth-child(2) {
            margin-top: 10px;
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
      .el-divider--horizontal {
        margin-top: 2px;
      }
      .el-divider--vertical {
        margin-left: 12px;
      }
      &:nth-child(1) {
        background-color:#2798eb;
      }
      &:nth-child(2) {
        background-color:#c9a7e9;
        p:nth-child(1) {
          margin-top: 5px;
          margin-bottom: 24px;
        }
      }
      &:nth-child(3) {
        background-color:#ec808d;
      }
      &:nth-child(4) {
        background-color:#a9a951;
      }
      &:nth-child(5) {
        background-color:#7abb8c;
      }
      &:nth-child(6) {
        background-color:#8e8e8e;
      }
      &:nth-child(7) {
        background-color:#f8b358;
      }

    }
  }
</style>